<template>
  <div class="customer-detail">
    <!-- 页面头部导航区 -->
    <div class="page-header">
      <div class="breadcrumb-section">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <el-button text @click="goBack" :icon="ArrowLeft">返回</el-button>
          </el-breadcrumb-item>
          <el-breadcrumb-item>CRM系统</el-breadcrumb-item>
          <el-breadcrumb-item>客户档案管理</el-breadcrumb-item>
          <el-breadcrumb-item>客户列表</el-breadcrumb-item>
          <el-breadcrumb-item>客户详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="customer-basic-card">
        <div class="customer-avatar-section">
          <el-avatar 
            :size="80" 
            :src="customerDetail?.basicInfo?.avatar" 
            :icon="UserFilled"
            shape="square"
          />
          <div class="online-status" :class="{ online: isOnline }"></div>
        </div>

        <div class="customer-info-section">
          <div class="name-section">
            <h1>{{ customerDetail?.basicInfo?.customerName || '加载中...' }}</h1>
            <span class="customer-code">{{ customerDetail?.basicInfo?.customerCode }}</span>
          </div>
          <div class="basic-info">
            <span class="age-gender">{{ customerDetail?.basicInfo?.age }}岁 · {{ customerDetail?.basicInfo?.gender }}</span>
            <el-tag 
              :type="getStatusTagType(customerDetail?.basicInfo?.customerStatus)" 
              size="default"
              class="status-tag"
            >
              {{ customerDetail?.basicInfo?.customerStatus }}
            </el-tag>
          </div>
          <div class="contact-info">
            <span class="phone">
              <el-icon><Phone /></el-icon>
              {{ customerDetail?.basicInfo?.primaryPhone }}
            </span>
            <span v-if="customerDetail?.basicInfo?.wechat" class="wechat">
              <el-icon><ChatDotSquare /></el-icon>
              {{ customerDetail?.basicInfo?.wechat }}
            </span>
          </div>
        </div>

        <div class="main-actions">
          <el-button type="success" size="large" :icon="Phone" @click="callCustomer">
            立即拨号
          </el-button>
          <el-button type="primary" size="large" :icon="ChatDotSquare" @click="sendMessage">
            发送短信
          </el-button>
          <el-button size="large" :icon="Edit" @click="editCustomer">
            编辑资料
          </el-button>
        </div>
      </div>
    </div>

    <!-- 客户状态概览区 -->
    <div class="status-overview-section">
      <div class="overview-cards">
        <div class="overview-card customer-status">
          <div class="card-icon">👤</div>
          <div class="card-content">
            <div class="card-title">客户状态</div>
            <div class="card-value">{{ customerDetail?.basicInfo?.customerStatus }}</div>
            <div class="card-subtitle">保持{{ getStatusDuration() }}</div>
          </div>
        </div>

        <div class="overview-card health-status">
          <div class="card-icon">💪</div>
          <div class="card-content">
            <div class="card-title">健康状况</div>
            <div class="card-value">{{ customerDetail?.basicInfo?.healthStatus }}</div>
            <div class="card-subtitle">{{ getHealthNote() }}</div>
          </div>
        </div>

        <div class="overview-card last-contact">
          <div class="card-icon">📞</div>
          <div class="card-content">
            <div class="card-title">最近联系</div>
            <div class="card-value">{{ formatLastContact() }}</div>
            <div class="card-subtitle">电话联系</div>
          </div>
        </div>

        <div class="overview-card follow-up">
          <div class="card-icon">🔔</div>
          <div class="card-content">
            <div class="card-title">跟进提醒</div>
            <div class="card-value">3天后</div>
            <div class="card-subtitle">电话回访</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧信息区域 (70%) -->
      <div class="left-info-area">
        <!-- 基础信息模块 -->
        <div class="info-module basic-info-module">
          <div class="module-header">
            <h3><el-icon><User /></el-icon>基础信息</h3>
            <el-button text type="primary" @click="editBasicInfo">编辑</el-button>
          </div>
          
          <div class="module-content">
            <div class="info-section personal-info">
              <h4>个人基本信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <label>客户编号</label>
                  <span class="copyable" @click="copyToClipboard(customerDetail?.basicInfo?.customerCode)">
                    {{ customerDetail?.basicInfo?.customerCode }}
                    <el-icon><DocumentCopy /></el-icon>
                  </span>
                </div>
                <div class="info-item">
                  <label>姓名</label>
                  <span>{{ customerDetail?.basicInfo?.customerName }}</span>
                </div>
                <div class="info-item">
                  <label>性别</label>
                  <span>{{ customerDetail?.basicInfo?.gender }}</span>
                </div>
                <div class="info-item">
                  <label>出生日期</label>
                  <span>{{ formatDate(customerDetail?.basicInfo?.birthDate) }}</span>
                </div>
                <div class="info-item">
                  <label>实际年龄</label>
                  <span>{{ customerDetail?.basicInfo?.age }}岁</span>
                </div>
                <div class="info-item">
                  <label>身份证号</label>
                  <span class="sensitive-info" @click="toggleSensitiveInfo('idCard')">
                    {{ showSensitiveInfo.idCard ? customerDetail?.basicInfo?.idCard : maskIdCard(customerDetail?.basicInfo?.idCard) }}
                  </span>
                </div>
                <div class="info-item">
                  <label>工作状态</label>
                  <span>{{ customerDetail?.basicInfo?.workStatus }}</span>
                </div>
                <div class="info-item">
                  <label>职业信息</label>
                  <span>{{ customerDetail?.basicInfo?.occupation || '未填写' }}</span>
                </div>
              </div>
            </div>

            <div class="info-section contact-info">
              <h4>联系方式信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <label>主要手机</label>
                  <span class="contact-item">
                    {{ customerDetail?.basicInfo?.primaryPhone }}
                    <el-button text type="success" size="small" :icon="Phone" @click="callCustomer" />
                  </span>
                </div>
                <div class="info-item" v-if="customerDetail?.basicInfo?.backupPhone">
                  <label>备用手机</label>
                  <span class="contact-item">
                    {{ customerDetail?.basicInfo?.backupPhone }}
                    <el-button text type="success" size="small" :icon="Phone" @click="callBackupPhone" />
                  </span>
                </div>
                <div class="info-item" v-if="customerDetail?.basicInfo?.wechat">
                  <label>微信号</label>
                  <span class="contact-item">
                    {{ customerDetail?.basicInfo?.wechat }}
                    <el-button text type="primary" size="small" :icon="DocumentCopy" @click="copyToClipboard(customerDetail?.basicInfo?.wechat)" />
                  </span>
                </div>
                <div class="info-item" v-if="customerDetail?.basicInfo?.email">
                  <label>邮箱</label>
                  <span class="contact-item">
                    {{ customerDetail?.basicInfo?.email }}
                    <el-button text type="primary" size="small" :icon="Message" @click="sendEmail" />
                  </span>
                </div>
                <div class="info-item" v-if="customerDetail?.basicInfo?.address">
                  <label>通讯地址</label>
                  <span class="contact-item">
                    {{ customerDetail?.basicInfo?.address }}
                    <el-button text type="info" size="small" :icon="Location" @click="viewOnMap" />
                  </span>
                </div>
              </div>
            </div>

            <div class="info-section social-info">
              <h4>社会关系信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <label>紧急联系人</label>
                  <span class="contact-item">
                    {{ customerDetail?.basicInfo?.emergencyContactName }} ({{ customerDetail?.basicInfo?.emergencyContactRelation }})
                    <el-button text type="success" size="small" :icon="Phone" @click="callEmergencyContact" />
                  </span>
                </div>
                <div class="info-item">
                  <label>联系电话</label>
                  <span>{{ customerDetail?.basicInfo?.emergencyContactPhone }}</span>
                </div>
                <div class="info-item" v-if="customerDetail?.basicInfo?.referrerInfo?.referrerName">
                  <label>推荐人</label>
                  <span>{{ customerDetail?.basicInfo?.referrerInfo?.referrerName }} ({{ customerDetail?.basicInfo?.referrerInfo?.referrerRelation }})</span>
                </div>
              </div>
              
              <div class="customer-tags-section">
                <label>客户标签</label>
                <div class="tags-container">
                  <el-tag
                    v-for="tag in customerDetail?.tags || []"
                    :key="tag.id"
                    :type="getTagType(tag.category)"
                    size="default"
                    closable
                    @close="removeTag(tag.id)"
                  >
                    {{ tag.name }}
                  </el-tag>
                  <el-button size="small" text type="primary" :icon="Plus" @click="addTag">
                    添加标签
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 旅游偏好模块 -->
        <div class="info-module travel-preferences-module">
          <div class="module-header">
            <h3><el-icon><MapLocation /></el-icon>旅游偏好</h3>
            <el-button text type="primary" @click="editTravelPreferences">编辑</el-button>
          </div>
          
          <div class="module-content">
            <div class="info-section budget-preferences">
              <h4>出行预算偏好</h4>
              <div class="budget-info">
                <div class="budget-range">
                  <label>预算范围</label>
                  <div class="range-display">
                    <span class="range-label">{{ customerDetail?.travelPreferences?.budgetRange }}</span>
                    <div class="range-bar">
                      <div class="range-fill" :style="getBudgetRangeStyle()"></div>
                    </div>
                    <span class="range-amount">¥{{ customerDetail?.travelPreferences?.budgetMin || 0 }} - ¥{{ customerDetail?.travelPreferences?.budgetMax || 0 }}</span>
                  </div>
                </div>
                <div class="consumption-features">
                  <label>消费特点</label>
                  <div class="feature-tags">
                    <el-tag 
                      v-for="feature in customerDetail?.travelPreferences?.consumptionFeatures || []" 
                      :key="feature"
                      size="small"
                      type="info"
                    >
                      {{ feature }}
                    </el-tag>
                  </div>
                </div>
                <div class="payment-preference">
                  <label>支付偏好</label>
                  <span class="payment-method">
                    <el-icon><CreditCard /></el-icon>
                    {{ customerDetail?.travelPreferences?.paymentPreference }}
                  </span>
                </div>
              </div>
            </div>

            <div class="info-section destination-preferences">
              <h4>目的地偏好</h4>
              <div class="destination-info">
                <div class="region-preferences">
                  <div class="region-group">
                    <label>国内地域</label>
                    <div class="region-tags">
                      <el-tag 
                        v-for="region in customerDetail?.travelPreferences?.domesticRegions || []" 
                        :key="region"
                        type="success"
                        size="small"
                      >
                        {{ region }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="region-group">
                    <label>国际地域</label>
                    <div class="region-tags">
                      <el-tag 
                        v-for="region in customerDetail?.travelPreferences?.internationalRegions || []" 
                        :key="region"
                        type="warning"
                        size="small"
                      >
                        {{ region }}
                      </el-tag>
                    </div>
                  </div>
                </div>
                <div class="landscape-preferences">
                  <label>景观偏好</label>
                  <div class="landscape-grid">
                    <div 
                      v-for="landscape in customerDetail?.travelPreferences?.landscapePreferences || []" 
                      :key="landscape"
                      class="landscape-item"
                    >
                      <span class="landscape-icon">{{ getLandscapeIcon(landscape) }}</span>
                      <span class="landscape-name">{{ landscape }}</span>
                    </div>
                  </div>
                </div>
                <div class="climate-preferences">
                  <label>气候偏好</label>
                  <div class="climate-display">
                    <div 
                      v-for="climate in customerDetail?.travelPreferences?.climatePreferences || []" 
                      :key="climate"
                      class="climate-item"
                    >
                      <span class="climate-icon">🌡️</span>
                      <span>{{ climate }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="info-section travel-arrangements">
              <h4>出行安排偏好</h4>
              <div class="arrangements-info">
                <div class="time-preferences">
                  <label>出行时间</label>
                  <div class="season-months">
                    <div class="season-tags">
                      <el-tag 
                        v-for="season in customerDetail?.travelPreferences?.seasonPreferences || []" 
                        :key="season"
                        :type="getSeasonTagType(season)"
                        size="small"
                      >
                        {{ season }}
                      </el-tag>
                    </div>
                    <div class="preferred-months">
                      <span class="month-label">偏好月份：</span>
                      <span class="months">{{ formatPreferredMonths() }}</span>
                    </div>
                  </div>
                </div>
                <div class="duration-preference">
                  <label>出行天数</label>
                  <div class="duration-display">
                    <span class="duration-type">{{ customerDetail?.travelPreferences?.durationPreference }}</span>
                    <div class="duration-timeline">
                      <div class="timeline-bar" :style="getDurationTimelineStyle()"></div>
                    </div>
                  </div>
                </div>
                <div class="transport-accommodation">
                  <div class="transport-info">
                    <label>交通偏好</label>
                    <div class="transport-tags">
                      <el-tag 
                        v-for="transport in customerDetail?.travelPreferences?.transportPreferences || []" 
                        :key="transport"
                        type="primary"
                        size="small"
                      >
                        {{ getTransportIcon(transport) }} {{ transport }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="accommodation-info">
                    <label>住宿标准</label>
                    <span class="accommodation-level">
                      <el-icon><House /></el-icon>
                      {{ customerDetail?.travelPreferences?.accommodationStandard }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 健康档案模块 -->
        <div class="info-module health-info-module">
          <div class="module-header">
            <h3><el-icon><User /></el-icon>健康档案</h3>
            <el-button text type="primary" @click="editHealthInfo">编辑</el-button>
          </div>
          
          <div class="module-content">
            <div class="info-section health-assessment">
              <h4>健康状况评估</h4>
              <div class="health-overview">
                <div class="overall-health">
                  <div class="health-icon-large" :class="getHealthStatusClass(customerDetail?.healthInfo?.healthStatus)">
                    {{ getHealthIcon(customerDetail?.healthInfo?.healthStatus) }}
                  </div>
                  <div class="health-info">
                    <div class="health-status">{{ customerDetail?.healthInfo?.healthStatus }}</div>
                    <div class="mobility-status">{{ customerDetail?.healthInfo?.mobilityAbility }}</div>
                  </div>
                </div>
                
                <div class="mobility-level">
                  <label>行动能力</label>
                  <div class="ability-bar">
                    <div class="ability-fill" :style="getMobilityBarStyle()"></div>
                  </div>
                  <span class="ability-text">{{ customerDetail?.healthInfo?.mobilityAbility }}</span>
                </div>
              </div>
            </div>

            <div class="info-section health-details">
              <h4>健康详情记录</h4>
              <div class="health-records">
                <div class="disease-section" v-if="hasChronicDiseases">
                  <label>慢性疾病</label>
                  <div class="disease-tags">
                    <el-tag 
                      v-for="disease in getAllDiseases()" 
                      :key="disease"
                      type="danger"
                      size="small"
                    >
                      {{ disease }}
                    </el-tag>
                  </div>
                </div>
                
                <div class="medication-section" v-if="customerDetail?.healthInfo?.medicationInfo">
                  <label>用药情况</label>
                  <div class="medication-info">
                    <el-icon><Document /></el-icon>
                    <span>{{ customerDetail?.healthInfo?.medicationInfo }}</span>
                  </div>
                </div>
                
                <div class="diet-section">
                  <label>饮食限制</label>
                  <div class="diet-tags">
                    <el-tag 
                      v-for="restriction in customerDetail?.healthInfo?.dietaryRestrictions || []" 
                      :key="restriction"
                      type="warning"
                      size="small"
                    >
                      {{ restriction }}
                    </el-tag>
                  </div>
                </div>
                
                <div class="insurance-section" v-if="customerDetail?.healthInfo?.insuranceInfo">
                  <label>保险情况</label>
                  <div class="insurance-info">
                    <el-icon><Document /></el-icon>
                    <span>{{ customerDetail?.healthInfo?.insuranceInfo }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 家庭社交模块 -->
        <div class="info-module family-info-module">
          <div class="module-header">
            <h3><el-icon><UserFilled /></el-icon>家庭社交</h3>
            <el-button text type="primary" @click="editFamilyInfo">编辑</el-button>
          </div>
          
          <div class="module-content">
            <div class="info-section family-structure">
              <h4>家庭结构信息</h4>
              <div class="family-info">
                <div class="marital-status">
                  <label>婚姻状况</label>
                  <span class="status-info">
                    <el-icon>{{ getMaritalIcon() }}</el-icon>
                    {{ customerDetail?.familyInfo?.maritalStatus }}
                  </span>
                </div>
                
                <div v-if="customerDetail?.familyInfo?.spouseInfo" class="spouse-info">
                  <label>配偶信息</label>
                  <div class="spouse-card">
                    <div class="spouse-details">
                      <span class="spouse-name">{{ customerDetail?.familyInfo?.spouseInfo?.spouseName }}</span>
                      <span class="spouse-age">{{ customerDetail?.familyInfo?.spouseInfo?.spouseAge }}岁</span>
                    </div>
                    <div class="spouse-travel">
                      <span class="travel-together">{{ customerDetail?.familyInfo?.spouseInfo?.spouseTravelTogether }}</span>
                    </div>
                    <el-button text type="success" size="small" :icon="Phone" @click="callSpouse">
                      联系
                    </el-button>
                  </div>
                </div>
                
                <div v-if="customerDetail?.familyInfo?.childrenInfo?.length" class="children-info">
                  <label>子女信息</label>
                  <div class="children-list">
                    <div 
                      v-for="(child, index) in customerDetail?.familyInfo?.childrenInfo" 
                      :key="index"
                      class="child-card"
                    >
                      <div class="child-details">
                        <span class="child-name">{{ child.name }}</span>
                        <span class="relationship-closeness" :class="getClosenessClass(child.relationshipCloseness)">
                          {{ child.relationshipCloseness }}
                        </span>
                        <span class="travel-attitude" :class="getAttitudeClass(child.travelAttitude)">
                          {{ child.travelAttitude }}旅游
                        </span>
                      </div>
                      <el-button text type="success" size="small" :icon="Phone" @click="callChild(child.phone)">
                        联系
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="info-section decision-analysis">
              <h4>决策模式分析</h4>
              <div class="decision-info">
                <div class="decision-pattern">
                  <label>决策特点</label>
                  <div class="pattern-display">
                    <span class="pattern-type">{{ customerDetail?.familyInfo?.decisionPattern }}</span>
                    <div class="pattern-description">
                      {{ getDecisionDescription() }}
                    </div>
                  </div>
                </div>
                
                <div class="influence-factors">
                  <label>影响因素</label>
                  <div class="factors-chart">
                    <div 
                      v-for="factor in customerDetail?.familyInfo?.influenceFactors || []" 
                      :key="factor"
                      class="factor-item"
                    >
                      <span class="factor-name">{{ factor }}</span>
                      <div class="factor-weight">
                        <div class="weight-bar" :style="getFactorWeightStyle(factor)"></div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="marketing-suggestions">
                  <label>建议策略</label>
                  <div class="suggestions-list">
                    <div 
                      v-for="suggestion in getMarketingSuggestions()" 
                      :key="suggestion"
                      class="suggestion-item"
                    >
                      <el-icon><More /></el-icon>
                      <span>{{ suggestion }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧操作区域 (30%) -->
      <div class="right-operations-area">
        <!-- 快速操作面板 -->
        <div class="operations-module quick-actions-module">
          <div class="module-header">
            <h3><el-icon><Operation /></el-icon>快速操作</h3>
          </div>
          
          <div class="module-content">
            <div class="main-actions">
              <el-button type="success" size="large" :icon="Phone" @click="callCustomer" class="action-btn">
                立即联系
              </el-button>
              <el-dropdown>
                <el-button type="success" size="large" class="dropdown-btn">
                  <el-icon><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="Phone" @click="callCustomer">拨打电话</el-dropdown-item>
                    <el-dropdown-item :icon="ChatDotSquare" @click="sendMessage">发送短信</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>

            <div class="secondary-actions">
              <el-button type="primary" :icon="Calendar" @click="scheduleFollowUp" class="full-width-btn">
                安排跟进
              </el-button>
              
              <el-dropdown class="full-width">
                <el-button type="default" :icon="Refresh" class="full-width-btn">
                  更新状态
                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="updateStatus('有效客户')">设为有效客户</el-dropdown-item>
                    <el-dropdown-item @click="updateStatus('潜在客户')">设为潜在客户</el-dropdown-item>
                    <el-dropdown-item @click="updateStatus('已成交客户')">设为已成交</el-dropdown-item>
                    <el-dropdown-item @click="updateStatus('无效客户')">设为无效客户</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              
              <el-button type="default" :icon="PriceTag" @click="manageTags" class="full-width-btn">
                管理标签
              </el-button>
              
              <el-button type="default" :icon="Document" @click="sendMaterials" class="full-width-btn">
                发送资料
              </el-button>
              
              <el-button type="default" :icon="Present" @click="inviteActivity" class="full-width-btn">
                邀请活动
              </el-button>
            </div>

            <div class="auxiliary-actions">
              <el-button type="info" text :icon="Download" @click="exportProfile">
                导出档案
              </el-button>
              <el-button type="info" text :icon="Share" @click="shareCustomer">
                分享客户
              </el-button>
              <el-button type="info" text :icon="Bell" @click="setReminder">
                设置提醒
              </el-button>
              <el-dropdown>
                <el-button type="info" text :icon="More">
                  更多操作
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="Edit">编辑完整资料</el-dropdown-item>
                    <el-dropdown-item :icon="CopyDocument">复制客户信息</el-dropdown-item>
                    <el-dropdown-item :icon="Delete" class="danger-item">删除客户</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>

        <!-- 最近活动时间线 -->
        <div class="operations-module activity-timeline-module">
          <div class="module-header">
            <h3><el-icon><Clock /></el-icon>最近活动</h3>
            <el-button text type="primary" size="small" @click="viewAllActivities">查看全部</el-button>
          </div>
          
          <div class="module-content">
            <div class="timeline-container">
              <div 
                v-for="(activity, index) in recentActivities" 
                :key="activity.id"
                class="timeline-item"
                :class="{ important: activity.important }"
              >
                <div class="timeline-dot">
                  <el-icon>{{ getActivityIcon(activity.type) }}</el-icon>
                </div>
                <div class="timeline-content">
                  <div class="activity-header">
                    <span class="activity-time">{{ formatActivityTime(activity.timestamp) }}</span>
                    <span class="activity-type">{{ getActivityTypeText(activity.type) }}</span>
                  </div>
                  <div class="activity-description">
                    {{ activity.description }}
                  </div>
                  <div class="activity-meta">
                    <span class="operator">{{ activity.operator }}</span>
                    <el-button v-if="activity.hasDetail" text type="primary" size="small" @click="viewActivityDetail(activity.id)">
                      详情
                    </el-button>
                  </div>
                </div>
              </div>
              
              <div class="timeline-more" v-if="hasMoreActivities">
                <el-button text type="primary" @click="loadMoreActivities">
                  加载更多活动记录
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签管理弹窗 -->
    <CustomerTagManager
      v-model:visible="tagManagerVisible"
      :customer-id="customerId"
      :initial-tags="customerDetail?.tags || []"
      @tags-updated="handleTagsUpdated"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, User, Phone, ChatDotRound as ChatDotSquare, Edit, UserFilled, MapLocation, 
  Calendar, Refresh, PriceTag, Document, Present, Download, Share, Bell, More,
  CopyDocument as DocumentCopy, Message, Location, Plus, CreditCard, House, 
  Operation, ArrowDown, Clock, Delete, CopyDocument
} from '@element-plus/icons-vue'
import { customerAPI } from '@/api/customer'
import type { CustomerDetail, CustomerTag } from '@/api/customer'
import CustomerTagManager from './CustomerTagManager.vue'

// 路由相关
const route = useRoute()
const router = useRouter()
const customerId = computed(() => Number(route.params.id))

// 响应式数据
const loading = ref(false)
const customerDetail = ref<CustomerDetail | null>(null)
const isOnline = ref(false)
const tagManagerVisible = ref(false)
const showSensitiveInfo = ref({
  idCard: false
})

// 最近活动数据
const recentActivities = ref([
  {
    id: 1,
    type: 'phone',
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
    description: '电话联系客户，了解春季出游意向，客户表示对华东地区较感兴趣',
    operator: '李小明',
    important: true,
    hasDetail: true
  },
  {
    id: 2,
    type: 'status',
    timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
    description: '客户状态更新为"有效客户"',
    operator: '系统',
    important: false,
    hasDetail: false
  },
  {
    id: 3,
    type: 'material',
    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    description: '发送了春季旅游产品手册和价格表',
    operator: '王小红',
    important: false,
    hasDetail: true
  },
  {
    id: 4,
    type: 'meeting',
    timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
    description: '客户到店咨询，详细了解了江南春游线路',
    operator: '李小明',
    important: true,
    hasDetail: true
  },
  {
    id: 5,
    type: 'tag',
    timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
    description: '添加标签："价格敏感"、"需要关怀"',
    operator: '王小红',
    important: false,
    hasDetail: false
  }
])

const hasMoreActivities = ref(true)

// 计算属性
const hasChronicDiseases = computed(() => {
  const healthInfo = customerDetail.value?.healthInfo
  return (healthInfo?.chronicDiseases?.length || 0) > 0 ||
         (healthInfo?.cardiovascularDiseases?.length || 0) > 0 ||
         (healthInfo?.endocrineDiseases?.length || 0) > 0 ||
         (healthInfo?.respiratoryDiseases?.length || 0) > 0 ||
         (healthInfo?.musculoskeletalDiseases?.length || 0) > 0
})

// 方法
const loadCustomerDetail = async () => {
  try {
    loading.value = true
    const response = await customerAPI.getCustomerDetail(customerId.value)
    customerDetail.value = response.data
    
    // 模拟在线状态
    isOnline.value = Math.random() > 0.5
  } catch (error) {
    ElMessage.error('加载客户详情失败')
    console.error('Load customer detail error:', error)
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.back()
}

// 状态相关方法
const getStatusTagType = (status?: string) => {
  const typeMap: Record<string, string> = {
    '有效客户': 'success',
    '潜在客户': 'primary',
    '无效客户': 'info',
    '已成交客户': 'warning',
    '黑名单': 'danger'
  }
  return typeMap[status || ''] || 'default'
}

const getStatusDuration = () => {
  return '3个月'
}

const getHealthNote = () => {
  const status = customerDetail.value?.basicInfo?.healthStatus
  const noteMap: Record<string, string> = {
    '健康良好': '适合各类旅游',
    '健康一般': '需要注意休息',
    '健康较差': '建议轻松行程',
    '健康很差': '需要医疗保障'
  }
  return noteMap[status || ''] || '未评估'
}

const formatLastContact = () => {
  const lastContact = customerDetail.value?.basicInfo?.lastContactTime
  if (!lastContact) return '未联系'
  
  const date = new Date(lastContact)
  const now = new Date()
  const diffTime = now.getTime() - date.getTime()
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) return '今天'
  if (diffDays === 1) return '昨天'
  if (diffDays < 7) return `${diffDays}天前`
  return `${Math.floor(diffDays / 7)}周前`
}

// 格式化方法
const formatDate = (dateString?: string) => {
  if (!dateString) return '--'
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const maskIdCard = (idCard?: string) => {
  if (!idCard) return '--'
  return idCard.replace(/^(.{4}).*(.{4})$/, '$1**********$2')
}

const formatPreferredMonths = () => {
  const months = customerDetail.value?.travelPreferences?.monthPreferences || []
  if (months.length === 0) return '无偏好'
  
  return months.map(month => `${month}月`).join('、')
}

const formatActivityTime = (timestamp: Date) => {
  const now = new Date()
  const diffTime = now.getTime() - timestamp.getTime()
  const diffMinutes = Math.floor(diffTime / (1000 * 60))
  const diffHours = Math.floor(diffMinutes / 60)
  const diffDays = Math.floor(diffHours / 24)
  
  if (diffMinutes < 60) return `${diffMinutes}分钟前`
  if (diffHours < 24) return `${diffHours}小时前`
  if (diffDays < 7) return `${diffDays}天前`
  return timestamp.toLocaleDateString('zh-CN')
}

// 样式相关方法
const getHealthStatusClass = (status?: string) => {
  const classMap: Record<string, string> = {
    '健康良好': 'health-excellent',
    '健康一般': 'health-good',
    '健康较差': 'health-fair',
    '健康很差': 'health-poor'
  }
  return classMap[status || ''] || 'health-default'
}

const getHealthIcon = (status?: string) => {
  const iconMap: Record<string, string> = {
    '健康良好': '💚',
    '健康一般': '💛',
    '健康较差': '🧡',
    '健康很差': '❤️'
  }
  return iconMap[status || ''] || '💙'
}

const getBudgetRangeStyle = () => {
  const budgetRange = customerDetail.value?.travelPreferences?.budgetRange
  const widthMap: Record<string, number> = {
    '经济型': 25,
    '舒适型': 50,
    '品质型': 75,
    '豪华型': 100
  }
  const width = widthMap[budgetRange || ''] || 0
  return { width: `${width}%` }
}

const getMobilityBarStyle = () => {
  const ability = customerDetail.value?.healthInfo?.mobilityAbility
  const widthMap: Record<string, number> = {
    '行动自如': 100,
    '轻微受限': 75,
    '需要辅助': 50,
    '轮椅出行': 25
  }
  const width = widthMap[ability || ''] || 0
  return { width: `${width}%` }
}

const getDurationTimelineStyle = () => {
  const duration = customerDetail.value?.travelPreferences?.durationPreference
  const widthMap: Record<string, number> = {
    '短途': 25,
    '中途': 50,
    '长途': 75,
    '超长': 100
  }
  const width = widthMap[duration || ''] || 0
  return { width: `${width}%` }
}

const getFactorWeightStyle = (factor: string) => {
  const weightMap: Record<string, number> = {
    '价格因素': 80,
    '安全因素': 95,
    '健康因素': 70,
    '家人意见': 60,
    '朋友推荐': 40
  }
  const width = weightMap[factor] || 50
  return { width: `${width}%` }
}

// 标签相关方法
const getTagType = (category?: string) => {
  const typeMap: Record<string, string> = {
    '价值分类': 'warning',
    '服务特点': 'success',
    '出行特点': 'primary',
    '健康状态': 'danger',
    '消费习惯': 'info',
    '自定义': 'default'
  }
  return typeMap[category || ''] || 'default'
}

const getSeasonTagType = (season: string) => {
  const typeMap: Record<string, string> = {
    '春季': 'success',
    '夏季': 'warning',
    '秋季': 'primary',
    '冬季': 'info'
  }
  return typeMap[season] || 'default'
}

// 图标相关方法
const getLandscapeIcon = (landscape: string) => {
  const iconMap: Record<string, string> = {
    '自然风光': '🏞️',
    '历史古迹': '🏛️',
    '海滨度假': '🏖️',
    '温泉养生': '♨️',
    '美食文化': '🍜',
    '民俗风情': '🎭',
    '都市观光': '🏙️',
    '摄影采风': '📸',
    '购物娱乐': '🛍️'
  }
  return iconMap[landscape] || '📍'
}

const getTransportIcon = (transport: string) => {
  const iconMap: Record<string, string> = {
    '飞机': '✈️',
    '高铁': '🚄',
    '普通火车': '🚂',
    '大巴车': '🚌',
    '自驾车': '🚗'
  }
  return iconMap[transport] || '🚗'
}

const getMaritalIcon = () => {
  const status = customerDetail.value?.familyInfo?.maritalStatus
  const iconMap: Record<string, any> = {
    '已婚': '💑',
    '丧偶': '💔',
    '离异': '💔',
    '未婚': '👤'
  }
  return iconMap[status || ''] || '👤'
}

const getActivityIcon = (type: string) => {
  const iconMap: Record<string, any> = {
    'phone': Phone,
    'message': ChatDotSquare,
    'meeting': UserFilled,
    'material': Document,
    'status': Refresh,
    'tag': PriceTag,
    'activity': Present
  }
  return iconMap[type] || Document
}

// 数据处理方法
const getAllDiseases = () => {
  const healthInfo = customerDetail.value?.healthInfo
  if (!healthInfo) return []
  
  return [
    ...(healthInfo.chronicDiseases || []),
    ...(healthInfo.cardiovascularDiseases || []),
    ...(healthInfo.endocrineDiseases || []),
    ...(healthInfo.respiratoryDiseases || []),
    ...(healthInfo.musculoskeletalDiseases || [])
  ]
}

const getClosenessClass = (closeness: string) => {
  const classMap: Record<string, string> = {
    '关系密切': 'closeness-close',
    '关系一般': 'closeness-normal',
    '关系疏远': 'closeness-distant'
  }
  return classMap[closeness] || 'closeness-normal'
}

const getAttitudeClass = (attitude: string) => {
  const classMap: Record<string, string> = {
    '支持': 'attitude-support',
    '中立': 'attitude-neutral',
    '反对': 'attitude-oppose'
  }
  return classMap[attitude] || 'attitude-neutral'
}

const getDecisionDescription = () => {
  const pattern = customerDetail.value?.familyInfo?.decisionPattern
  const descMap: Record<string, string> = {
    '自主决策': '客户能够独立做出旅游决定，建议直接与客户沟通',
    '咨询决策': '客户会咨询他人意见，需要提供充分的信息支持',
    '共同决策': '客户与家人共同决策，建议邀请家人参与了解',
    '代为决策': '由他人代为决策，需要联系决策人进行沟通'
  }
  return descMap[pattern || ''] || '决策模式未知'
}

const getMarketingSuggestions = () => {
  const pattern = customerDetail.value?.familyInfo?.decisionPattern
  const factors = customerDetail.value?.familyInfo?.influenceFactors || []
  
  const suggestions: string[] = []
  
  if (pattern === '自主决策') {
    suggestions.push('可以直接向客户推荐产品，突出个人体验价值')
  }
  
  if (pattern === '共同决策') {
    suggestions.push('邀请配偶一起了解产品，强调家庭出游的意义')
  }
  
  if (factors.includes('价格因素')) {
    suggestions.push('重点介绍性价比高的产品线路')
  }
  
  if (factors.includes('安全因素')) {
    suggestions.push('强调旅游安全保障和保险服务')
  }
  
  if (factors.includes('健康因素')) {
    suggestions.push('推荐适合身体状况的轻松线路')
  }
  
  return suggestions.length > 0 ? suggestions : ['建议深入了解客户需求，制定个性化服务方案']
}

const getActivityTypeText = (type: string) => {
  const textMap: Record<string, string> = {
    'phone': '电话联系',
    'message': '短信沟通',
    'meeting': '面谈交流',
    'material': '资料发送',
    'status': '状态更新',
    'tag': '标签管理',
    'activity': '活动邀请'
  }
  return textMap[type] || '其他操作'
}

// 工具方法
const toggleSensitiveInfo = (field: keyof typeof showSensitiveInfo.value) => {
  showSensitiveInfo.value[field] = !showSensitiveInfo.value[field]
}

const copyToClipboard = async (text?: string) => {
  if (!text) return
  
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 操作方法
const callCustomer = () => {
  const phone = customerDetail.value?.basicInfo?.primaryPhone
  if (phone) {
    window.open(`tel:${phone}`)
  }
}

const callBackupPhone = () => {
  const phone = customerDetail.value?.basicInfo?.backupPhone
  if (phone) {
    window.open(`tel:${phone}`)
  }
}

const callEmergencyContact = () => {
  const phone = customerDetail.value?.basicInfo?.emergencyContactPhone
  if (phone) {
    window.open(`tel:${phone}`)
  }
}

const callSpouse = () => {
  const phone = customerDetail.value?.familyInfo?.spouseInfo?.spousePhone
  if (phone) {
    window.open(`tel:${phone}`)
  }
}

const callChild = (phone: string) => {
  window.open(`tel:${phone}`)
}

const sendMessage = () => {
  ElMessage.info('短信功能开发中')
}

const sendEmail = () => {
  const email = customerDetail.value?.basicInfo?.email
  if (email) {
    window.open(`mailto:${email}`)
  }
}

const viewOnMap = () => {
  ElMessage.info('地图功能开发中')
}

const editCustomer = () => {
  router.push(`/customers/${customerId.value}/edit`)
}

const editBasicInfo = () => {
  ElMessage.info('编辑基础信息功能开发中')
}

const editTravelPreferences = () => {
  ElMessage.info('编辑旅游偏好功能开发中')
}

const editHealthInfo = () => {
  ElMessage.info('编辑健康信息功能开发中')
}

const editFamilyInfo = () => {
  ElMessage.info('编辑家庭信息功能开发中')
}

const removeTag = (tagId?: number) => {
  ElMessage.info('删除标签功能开发中')
}

const addTag = () => {
  ElMessage.info('添加标签功能开发中')
}

const scheduleFollowUp = () => {
  ElMessage.info('安排跟进功能开发中')
}

const updateStatus = (status: string) => {
  ElMessage.success(`客户状态已更新为：${status}`)
}

const manageTags = () => {
  tagManagerVisible.value = true
}

const handleTagsUpdated = (updatedTags: CustomerTag[]) => {
  if (customerDetail.value) {
    customerDetail.value.tags = updatedTags
  }
  ElMessage.success('客户标签已更新')
}

const sendMaterials = () => {
  ElMessage.info('发送资料功能开发中')
}

const inviteActivity = () => {
  ElMessage.info('邀请活动功能开发中')
}

const exportProfile = () => {
  ElMessage.info('导出档案功能开发中')
}

const shareCustomer = () => {
  ElMessage.info('分享客户功能开发中')
}

const setReminder = () => {
  ElMessage.info('设置提醒功能开发中')
}

const viewAllActivities = () => {
  ElMessage.info('查看全部活动功能开发中')
}

const viewActivityDetail = (id: number) => {
  ElMessage.info(`查看活动详情：${id}`)
}

const loadMoreActivities = () => {
  ElMessage.info('加载更多活动记录功能开发中')
}

// 生命周期
onMounted(() => {
  loadCustomerDetail()
})
</script>

<style lang="scss" scoped>
.customer-detail {
  padding: var(--apple-spacing-lg);
  background: var(--apple-background-primary);
  min-height: 100vh;

  // 页面头部
  .page-header {
    margin-bottom: var(--apple-spacing-lg);

    .breadcrumb-section {
      margin-bottom: var(--apple-spacing-md);

      .el-breadcrumb {
        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            color: var(--apple-text-secondary);
            
            &:hover {
              color: var(--apple-link-color);
            }
          }
        }
      }
    }

    .customer-basic-card {
      background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
      padding: var(--apple-spacing-xl);
      border-radius: var(--apple-radius-lg);
      color: white;
      display: flex;
      align-items: center;
      gap: var(--apple-spacing-xl);

      .customer-avatar-section {
        position: relative;
        
        .online-status {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 3px solid white;
          background: #8E8E93;
          
          &.online {
            background: #34C759;
          }
        }
      }

      .customer-info-section {
        flex: 1;
        
        .name-section {
          display: flex;
          align-items: center;
          gap: var(--apple-spacing-md);
          margin-bottom: var(--apple-spacing-sm);
          
          h1 {
            margin: 0;
            font-size: 2rem;
            font-weight: 700;
          }
          
          .customer-code {
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9rem;
          }
        }
        
        .basic-info {
          display: flex;
          align-items: center;
          gap: var(--apple-spacing-md);
          margin-bottom: var(--apple-spacing-sm);
          
          .age-gender {
            opacity: 0.9;
          }
          
          .status-tag {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
          }
        }
        
        .contact-info {
          display: flex;
          gap: var(--apple-spacing-lg);
          
          .phone, .wechat {
            display: flex;
            align-items: center;
            gap: var(--apple-spacing-xs);
            font-weight: 500;
          }
        }
      }

      .main-actions {
        display: flex;
        gap: var(--apple-spacing-sm);
        
        .el-button {
          background: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: white;
          
          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
          
          &.el-button--success {
            background: white;
            color: #34C759;
            
            &:hover {
              background: rgba(255, 255, 255, 0.9);
            }
          }
          
          &.el-button--primary {
            background: white;
            color: #007AFF;
            
            &:hover {
              background: rgba(255, 255, 255, 0.9);
            }
          }
        }
      }
    }
  }

  // 状态概览区
  .status-overview-section {
    margin-bottom: var(--apple-spacing-lg);
    
    .overview-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--apple-spacing-md);
      
      .overview-card {
        background: white;
        padding: var(--apple-spacing-lg);
        border-radius: var(--apple-radius-lg);
        box-shadow: var(--apple-shadow-light);
        border-top: 4px solid;
        display: flex;
        align-items: center;
        gap: var(--apple-spacing-md);
        transition: transform 0.2s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: var(--apple-shadow-medium);
        }
        
        &.customer-status {
          border-top-color: #007AFF;
        }
        
        &.health-status {
          border-top-color: #34C759;
        }
        
        &.last-contact {
          border-top-color: #FF9500;
        }
        
        &.follow-up {
          border-top-color: #FF3B30;
        }
        
        .card-icon {
          font-size: 2rem;
        }
        
        .card-content {
          .card-title {
            font-size: 0.9rem;
            color: var(--apple-text-secondary);
            margin-bottom: 4px;
          }
          
          .card-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--apple-text-primary);
            margin-bottom: 4px;
          }
          
          .card-subtitle {
            font-size: 0.8rem;
            color: var(--apple-text-tertiary);
          }
        }
      }
    }
  }

  // 主要内容区域
  .main-content {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--apple-spacing-lg);
    
    // 左侧信息区域
    .left-info-area {
      display: flex;
      flex-direction: column;
      gap: var(--apple-spacing-lg);
      
      .info-module {
        background: white;
        border-radius: var(--apple-radius-lg);
        box-shadow: var(--apple-shadow-light);
        overflow: hidden;
        
        .module-header {
          background: var(--apple-background-secondary);
          padding: var(--apple-spacing-md) var(--apple-spacing-lg);
          border-bottom: 1px solid var(--apple-separator-primary);
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          h3 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--apple-spacing-sm);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--apple-text-primary);
          }
        }
        
        .module-content {
          padding: var(--apple-spacing-lg);
          
          .info-section {
            &:not(:last-child) {
              margin-bottom: var(--apple-spacing-xl);
              padding-bottom: var(--apple-spacing-xl);
              border-bottom: 1px solid var(--apple-separator-secondary);
            }
            
            h4 {
              margin: 0 0 var(--apple-spacing-md) 0;
              font-size: 1rem;
              font-weight: 600;
              color: var(--apple-text-primary);
            }
            
            .info-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: var(--apple-spacing-md);
              
              .info-item {
                display: flex;
                flex-direction: column;
                gap: 4px;
                
                label {
                  font-size: 0.9rem;
                  color: var(--apple-text-secondary);
                  font-weight: 500;
                }
                
                span {
                  color: var(--apple-text-primary);
                  
                  &.copyable {
                    cursor: pointer;
                    color: var(--apple-link-color);
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    
                    &:hover {
                      text-decoration: underline;
                    }
                  }
                  
                  &.sensitive-info {
                    cursor: pointer;
                    color: var(--apple-link-color);
                    
                    &:hover {
                      text-decoration: underline;
                    }
                  }
                  
                  &.contact-item {
                    display: flex;
                    align-items: center;
                    gap: var(--apple-spacing-xs);
                  }
                }
              }
            }
            
            // 客户标签特殊样式
            .customer-tags-section {
              display: flex;
              flex-direction: column;
              gap: var(--apple-spacing-sm);
              
              .tags-container {
                display: flex;
                flex-wrap: wrap;
                gap: var(--apple-spacing-sm);
                align-items: center;
              }
            }
          }
        }
      }
    }
    
    // 右侧操作区域
    .right-operations-area {
      display: flex;
      flex-direction: column;
      gap: var(--apple-spacing-lg);
      
      .operations-module {
        background: white;
        border-radius: var(--apple-radius-lg);
        box-shadow: var(--apple-shadow-light);
        overflow: hidden;
        
        .module-header {
          background: var(--apple-background-secondary);
          padding: var(--apple-spacing-md) var(--apple-spacing-lg);
          border-bottom: 1px solid var(--apple-separator-primary);
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          h3 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--apple-spacing-sm);
            font-size: 1rem;
            font-weight: 600;
            color: var(--apple-text-primary);
          }
        }
        
        .module-content {
          padding: var(--apple-spacing-lg);
        }
      }
      
      // 快速操作面板
      .quick-actions-module {
        .main-actions {
          display: flex;
          margin-bottom: var(--apple-spacing-lg);
          
          .action-btn {
            flex: 1;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          
          .dropdown-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: none;
            padding: 0 12px;
          }
        }
        
        .secondary-actions {
          display: flex;
          flex-direction: column;
          gap: var(--apple-spacing-sm);
          margin-bottom: var(--apple-spacing-lg);
          
          .full-width-btn {
            width: 100%;
            justify-content: flex-start;
          }
          
          .full-width {
            width: 100%;
            
            .full-width-btn {
              width: 100%;
              justify-content: space-between;
            }
          }
        }
        
        .auxiliary-actions {
          display: flex;
          flex-wrap: wrap;
          gap: var(--apple-spacing-sm);
          padding-top: var(--apple-spacing-md);
          border-top: 1px solid var(--apple-separator-secondary);
          
          .el-button {
            font-size: 0.9rem;
          }
          
          .danger-item {
            color: var(--apple-danger-color);
          }
        }
      }
      
      // 活动时间线
      .activity-timeline-module {
        .timeline-container {
          .timeline-item {
            display: flex;
            gap: var(--apple-spacing-md);
            margin-bottom: var(--apple-spacing-lg);
            position: relative;
            
            &:not(:last-child)::after {
              content: '';
              position: absolute;
              left: 14px;
              top: 30px;
              bottom: -16px;
              width: 2px;
              background: var(--apple-separator-secondary);
            }
            
            &.important {
              .timeline-dot {
                background: var(--apple-warning-color);
                color: white;
              }
            }
            
            .timeline-dot {
              width: 28px;
              height: 28px;
              border-radius: 50%;
              background: var(--apple-background-secondary);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: var(--apple-text-secondary);
              flex-shrink: 0;
              border: 2px solid white;
              box-shadow: 0 0 0 1px var(--apple-separator-primary);
            }
            
            .timeline-content {
              flex: 1;
              
              .activity-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 4px;
                
                .activity-time {
                  font-size: 0.8rem;
                  color: var(--apple-text-tertiary);
                }
                
                .activity-type {
                  font-size: 0.8rem;
                  color: var(--apple-text-secondary);
                  background: var(--apple-background-secondary);
                  padding: 2px 6px;
                  border-radius: 4px;
                }
              }
              
              .activity-description {
                font-size: 0.9rem;
                color: var(--apple-text-primary);
                line-height: 1.4;
                margin-bottom: var(--apple-spacing-xs);
              }
              
              .activity-meta {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .operator {
                  font-size: 0.8rem;
                  color: var(--apple-text-secondary);
                }
              }
            }
          }
          
          .timeline-more {
            text-align: center;
            padding-top: var(--apple-spacing-md);
            border-top: 1px solid var(--apple-separator-secondary);
          }
        }
      }
    }
  }

  // 旅游偏好特殊样式
  .budget-info {
    .budget-range {
      margin-bottom: var(--apple-spacing-md);
      
      .range-display {
        display: flex;
        flex-direction: column;
        gap: var(--apple-spacing-xs);
        
        .range-label {
          font-weight: 600;
          color: var(--apple-text-primary);
        }
        
        .range-bar {
          height: 8px;
          background: var(--apple-background-secondary);
          border-radius: 4px;
          overflow: hidden;
          
          .range-fill {
            height: 100%;
            background: linear-gradient(90deg, #34C759 0%, #FF9500 100%);
            transition: width 0.3s ease;
          }
        }
        
        .range-amount {
          font-size: 0.9rem;
          color: var(--apple-text-secondary);
        }
      }
    }
    
    .consumption-features {
      margin-bottom: var(--apple-spacing-md);
      
      .feature-tags {
        display: flex;
        gap: var(--apple-spacing-xs);
        flex-wrap: wrap;
      }
    }
    
    .payment-preference {
      .payment-method {
        display: flex;
        align-items: center;
        gap: var(--apple-spacing-xs);
        color: var(--apple-text-primary);
      }
    }
  }

  .destination-info {
    .region-preferences {
      margin-bottom: var(--apple-spacing-lg);
      
      .region-group {
        margin-bottom: var(--apple-spacing-md);
        
        label {
          display: block;
          margin-bottom: var(--apple-spacing-xs);
          font-weight: 500;
          color: var(--apple-text-secondary);
        }
        
        .region-tags {
          display: flex;
          gap: var(--apple-spacing-xs);
          flex-wrap: wrap;
        }
      }
    }
    
    .landscape-preferences {
      margin-bottom: var(--apple-spacing-lg);
      
      .landscape-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--apple-spacing-sm);
        
        .landscape-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: var(--apple-spacing-sm);
          background: var(--apple-background-secondary);
          border-radius: var(--apple-radius-md);
          text-align: center;
          
          .landscape-icon {
            font-size: 1.5rem;
            margin-bottom: 4px;
          }
          
          .landscape-name {
            font-size: 0.8rem;
            color: var(--apple-text-secondary);
          }
        }
      }
    }
    
    .climate-preferences {
      .climate-display {
        display: flex;
        gap: var(--apple-spacing-md);
        flex-wrap: wrap;
        
        .climate-item {
          display: flex;
          align-items: center;
          gap: var(--apple-spacing-xs);
          padding: var(--apple-spacing-xs) var(--apple-spacing-sm);
          background: var(--apple-background-secondary);
          border-radius: var(--apple-radius-sm);
          
          .climate-icon {
            font-size: 1rem;
          }
        }
      }
    }
  }

  .arrangements-info {
    .time-preferences {
      margin-bottom: var(--apple-spacing-lg);
      
      .season-months {
        .season-tags {
          display: flex;
          gap: var(--apple-spacing-xs);
          margin-bottom: var(--apple-spacing-sm);
          flex-wrap: wrap;
        }
        
        .preferred-months {
          font-size: 0.9rem;
          color: var(--apple-text-secondary);
          
          .month-label {
            font-weight: 500;
          }
        }
      }
    }
    
    .duration-preference {
      margin-bottom: var(--apple-spacing-lg);
      
      .duration-display {
        display: flex;
        flex-direction: column;
        gap: var(--apple-spacing-xs);
        
        .duration-type {
          font-weight: 600;
          color: var(--apple-text-primary);
        }
        
        .duration-timeline {
          height: 6px;
          background: var(--apple-background-secondary);
          border-radius: 3px;
          overflow: hidden;
          
          .timeline-bar {
            height: 100%;
            background: var(--apple-primary-color);
            transition: width 0.3s ease;
          }
        }
      }
    }
    
    .transport-accommodation {
      display: flex;
      gap: var(--apple-spacing-xl);
      
      .transport-info, .accommodation-info {
        flex: 1;
        
        label {
          display: block;
          margin-bottom: var(--apple-spacing-xs);
          font-weight: 500;
          color: var(--apple-text-secondary);
        }
        
        .transport-tags {
          display: flex;
          gap: var(--apple-spacing-xs);
          flex-wrap: wrap;
        }
        
        .accommodation-level {
          display: flex;
          align-items: center;
          gap: var(--apple-spacing-xs);
          color: var(--apple-text-primary);
        }
      }
    }
  }

  // 健康档案特殊样式
  .health-overview {
    display: flex;
    gap: var(--apple-spacing-xl);
    margin-bottom: var(--apple-spacing-lg);
    
    .overall-health {
      display: flex;
      align-items: center;
      gap: var(--apple-spacing-md);
      
      .health-icon-large {
        font-size: 3rem;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.health-excellent { background: rgba(52, 199, 89, 0.1); }
        &.health-good { background: rgba(255, 204, 0, 0.1); }
        &.health-fair { background: rgba(255, 149, 0, 0.1); }
        &.health-poor { background: rgba(255, 59, 48, 0.1); }
      }
      
      .health-info {
        .health-status {
          font-size: 1.2rem;
          font-weight: 600;
          color: var(--apple-text-primary);
          margin-bottom: 4px;
        }
        
        .mobility-status {
          color: var(--apple-text-secondary);
        }
      }
    }
    
    .mobility-level {
      flex: 1;
      
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .ability-bar {
        height: 8px;
        background: var(--apple-background-secondary);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 4px;
        
        .ability-fill {
          height: 100%;
          background: var(--apple-success-color);
          transition: width 0.3s ease;
        }
      }
      
      .ability-text {
        font-size: 0.9rem;
        color: var(--apple-text-secondary);
      }
    }
  }

  .health-records {
    .disease-section, .medication-section, .diet-section, .insurance-section {
      margin-bottom: var(--apple-spacing-md);
      
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .disease-tags, .diet-tags {
        display: flex;
        gap: var(--apple-spacing-xs);
        flex-wrap: wrap;
      }
      
      .medication-info, .insurance-info {
        display: flex;
        align-items: flex-start;
        gap: var(--apple-spacing-xs);
        color: var(--apple-text-primary);
        line-height: 1.4;
      }
    }
  }

  // 家庭信息特殊样式
  .family-info {
    .marital-status {
      margin-bottom: var(--apple-spacing-md);
      
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .status-info {
        display: flex;
        align-items: center;
        gap: var(--apple-spacing-xs);
        color: var(--apple-text-primary);
      }
    }
    
    .spouse-info {
      margin-bottom: var(--apple-spacing-md);
      
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .spouse-card {
        background: var(--apple-background-secondary);
        padding: var(--apple-spacing-md);
        border-radius: var(--apple-radius-md);
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .spouse-details {
          display: flex;
          flex-direction: column;
          gap: 4px;
          
          .spouse-name {
            font-weight: 600;
            color: var(--apple-text-primary);
          }
          
          .spouse-age {
            color: var(--apple-text-secondary);
            font-size: 0.9rem;
          }
        }
        
        .spouse-travel {
          .travel-together {
            font-size: 0.9rem;
            color: var(--apple-text-secondary);
          }
        }
      }
    }
    
    .children-info {
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .children-list {
        display: flex;
        flex-direction: column;
        gap: var(--apple-spacing-sm);
        
        .child-card {
          background: var(--apple-background-secondary);
          padding: var(--apple-spacing-md);
          border-radius: var(--apple-radius-md);
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .child-details {
            display: flex;
            align-items: center;
            gap: var(--apple-spacing-md);
            
            .child-name {
              font-weight: 600;
              color: var(--apple-text-primary);
            }
            
            .relationship-closeness {
              font-size: 0.8rem;
              padding: 2px 6px;
              border-radius: 4px;
              
              &.closeness-close {
                background: rgba(52, 199, 89, 0.1);
                color: #34C759;
              }
              
              &.closeness-normal {
                background: rgba(255, 204, 0, 0.1);
                color: #FFCC00;
              }
              
              &.closeness-distant {
                background: rgba(142, 142, 147, 0.1);
                color: #8E8E93;
              }
            }
            
            .travel-attitude {
              font-size: 0.8rem;
              padding: 2px 6px;
              border-radius: 4px;
              
              &.attitude-support {
                background: rgba(52, 199, 89, 0.1);
                color: #34C759;
              }
              
              &.attitude-neutral {
                background: rgba(255, 204, 0, 0.1);
                color: #FFCC00;
              }
              
              &.attitude-oppose {
                background: rgba(255, 59, 48, 0.1);
                color: #FF3B30;
              }
            }
          }
        }
      }
    }
  }

  .decision-info {
    .decision-pattern {
      margin-bottom: var(--apple-spacing-lg);
      
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .pattern-display {
        .pattern-type {
          font-size: 1.1rem;
          font-weight: 600;
          color: var(--apple-text-primary);
          display: block;
          margin-bottom: var(--apple-spacing-xs);
        }
        
        .pattern-description {
          color: var(--apple-text-secondary);
          line-height: 1.4;
          font-size: 0.9rem;
        }
      }
    }
    
    .influence-factors {
      margin-bottom: var(--apple-spacing-lg);
      
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .factors-chart {
        .factor-item {
          display: flex;
          align-items: center;
          gap: var(--apple-spacing-md);
          margin-bottom: var(--apple-spacing-sm);
          
          .factor-name {
            min-width: 80px;
            font-size: 0.9rem;
            color: var(--apple-text-primary);
          }
          
          .factor-weight {
            flex: 1;
            height: 6px;
            background: var(--apple-background-secondary);
            border-radius: 3px;
            overflow: hidden;
            
            .weight-bar {
              height: 100%;
              background: var(--apple-primary-color);
              transition: width 0.3s ease;
            }
          }
        }
      }
    }
    
    .marketing-suggestions {
      label {
        display: block;
        margin-bottom: var(--apple-spacing-xs);
        font-weight: 500;
        color: var(--apple-text-secondary);
      }
      
      .suggestions-list {
        .suggestion-item {
          display: flex;
          align-items: flex-start;
          gap: var(--apple-spacing-xs);
          margin-bottom: var(--apple-spacing-sm);
          padding: var(--apple-spacing-sm);
          background: rgba(0, 122, 255, 0.05);
          border-radius: var(--apple-radius-sm);
          color: var(--apple-text-primary);
          font-size: 0.9rem;
          line-height: 1.4;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .main-content {
      grid-template-columns: 1fr 300px;
    }
    
    .status-overview-section .overview-cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    padding: var(--apple-spacing-md);
    
    .page-header .customer-basic-card {
      flex-direction: column;
      text-align: center;
      gap: var(--apple-spacing-md);
      
      .main-actions {
        justify-content: center;
        flex-wrap: wrap;
      }
    }
    
    .status-overview-section .overview-cards {
      grid-template-columns: 1fr;
    }
    
    .main-content {
      grid-template-columns: 1fr;
      
      .right-operations-area {
        order: -1;
      }
    }
    
    .left-info-area .info-module .module-content .info-section .info-grid {
      grid-template-columns: 1fr;
    }
    
    .arrangements-info .transport-accommodation {
      flex-direction: column;
      gap: var(--apple-spacing-md);
    }
    
    .health-overview {
      flex-direction: column;
      gap: var(--apple-spacing-md);
    }
  }
}
</style>